import React from 'react';
import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
import Navigation from './components/Navigation';
import SimpleNoUiSlider from './components/SimpleNoUiSlider';
import BasicSlider from './example/BasicSlider';
import RangeSlider from './example/RangeSlider';
import VerticalSlider from './example/VerticalSlider';
import TooltipSlider from './example/TooltipSlider';
import CustomSlider from './example/CustomSlider';
import DateSlider from './example/DateSlider';
import MergeTooltipSlider from './example/MergeTooltipSlider';
import InputSlider from './example/InputSlider';
import ColorPicker from './example/ColorPicker';
import PipsSlider from './example/PipsSlider';
import StepsSlider from './example/StepsSlider';
import SkipStepSlider from './example/SkipStepSlider';
import NonLinearSlider from './example/NonLinearSlider';
import SoftLimitSlider from './example/SoftLimitSlider';
import LockedSlider from './example/LockedSlider';
import './App.css';

function App() {
  return (
    <Router>
      <div className="App">
        <Navigation />
        <Routes>
          <Route path="/examples" element={<SimpleNoUiSlider />} />
          <Route path="/basic" element={<BasicSlider />} />
          <Route path="/range" element={<RangeSlider />} />
          <Route path="/vertical" element={<VerticalSlider />} />
          <Route path="/tooltip" element={<TooltipSlider />} />
          <Route path="/custom" element={<CustomSlider />} />
          <Route path="/date" element={<DateSlider />} />
          <Route path="/merge-tooltip" element={<MergeTooltipSlider />} />
          <Route path="/input" element={<InputSlider />} />
          <Route path="/color-picker" element={<ColorPicker />} />
          <Route path="/pips" element={<PipsSlider />} />
          <Route path="/steps" element={<StepsSlider />} />
          <Route path="/skip-step" element={<SkipStepSlider />} />
          <Route path="/non-linear" element={<NonLinearSlider />} />
          <Route path="/soft-limit" element={<SoftLimitSlider />} />
          <Route path="/locked" element={<LockedSlider />} />
          <Route path="/" element={<Navigate to="/examples" replace />} />
        </Routes>
      </div>
    </Router>
  );
}

export default App; 